<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.tab{
		  display: flex;
		  background-color: #EFC0B8;
		  padding: 10px 15px 0 15px;
		  font-size: 14px;
		}
		.tab-item{
		  position: relative;
		  padding: 10px 35px;
		  margin: 0 -15px;
		  border-radius: 12px 12px 0 0;
		  cursor: pointer;
		  transition: .2s;
		  background-size: 12px 12px, 12px 12px, calc(100% - 24px) calc(100% + 12px);
		  background-position: right bottom, left bottom, center top;
		  background-repeat: no-repeat;
		}
		.tab-item.active{
		  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M100 100C44.772 100 0 55.228 0 0v100h100z' fill='%23F8EAE7'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 100c55.228 0 100-44.772 100-100v100H0z' fill='%23F8EAE7'/%3E%3C/svg%3E"),url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect rx='12' width='100%' height='100%' fill='%23F8EAE7'/></svg>");
		}

	</style>
	<body>
		<!--中间的圆角矩形比较容易，用 rect 就行  -->
		<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>   
			<rect rx="12" width='100%' height='100%' fill="#3A8EFF"/>
		</svg>
		<!-- 两边的反向圆角可以直接使用一段 path 路径（各种图形软件都可以生成） -->
		<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path fill-rule="evenodd" clip-rule="evenodd" d="M0 100C55.2285 100 100 55.2285 100 0V100H0Z" fill="#3A8EFF"/>
		</svg>
		<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path fill-rule="evenodd" clip-rule="evenodd" d="M100 100C44.7715 100 0 55.2285 0 0V100H100Z" fill="#3A8EFF"/>
		</svg>
		
		<!-- 3 段 svg 代码作为背景就可以了，可以用 background-size 和 background-position 进行调整和控制3 段 svg 代码作为背景就可以了，
		可以用 background-size 和 background-position 进行调整和控制 -->
		
		<!-- 
		 用 1 段 svg 里面包含 3 个路径不行吗？**答案是不行的。svg 里没法灵活使用定位，比如要实现位于右下角，svg 只能使用 100% 而不能使用 calc( 100% - 12px )，
		 更别说 CSS 还有 right bottom 这样的定位属性了，所以必须采用 CSS多背景-->
		<nav class="tab">
		  <a class="tab-item">Svelte API</a>
		  <a class="tab-item active">Svelte API</a>
		  <a class="tab-item">Svelte API</a>
		  <a class="tab-item">More Svelte API</a>
		</nav>
		
	</body>
</html>
